<template>
    <div class="my-water">
        <c-login-module keyword="myWater" :volume-year="table.year.volumeYear"></c-login-module>
        <div class="break"></div>
        <div style="margin:0 10px">
            <table style="width: 100%">
                <tr @click="click">
                    <td>{{table.yearNum}}年{{table.monthNum}}月</td>
                    <td>
                        <p>
                            <icon clazz="icon-shui1"></icon>
                            水量
                        </p>
                        <p><span v-if="table.month">{{table.month.volume}}</span><span v-else>--</span>m³</p>
                    </td>
                    <td>
                        <p>
                            <icon clazz="icon-shoushuiliang"></icon>
                            水费
                        </p>
                        <p><span v-if="table.month">{{table.month.price}}</span><span v-else>--</span>元</p>
                    </td>
                </tr>
                <tr>
                    <td>{{table.yearNum}}年</td>
                    <td>
                        <p>
                            <icon clazz="icon-shuifei1"></icon>
                            水量
                        </p>
                        <p><span v-if="table.year">{{table.year.volumeYear}}</span><span v-else>--</span>m³</p>
                    </td>
                    <td>
                        <p>
                            <icon clazz="icon-iclistfeiyong"></icon>
                            水费
                        </p>
                        <p><span v-if="table.year">{{table.year.priceYear}}</span><span v-else>--</span>元</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="break"></div>
        <c-grid :data="grid.data"></c-grid>
    </div>
</template>
<script>
    import CGrid from '../../components/CGrid'
    import CLoginModule from '../../components/CLoginModule'

    export default {
        components: {CGrid, CLoginModule},
        data() {
            return {
                grid: {
                    data: [
                        {
                            icon: 'icon-zhifu1',
                            label: '快速缴费'
                        }, {
                            icon: 'icon-yue',
                            label: '账户余额'
                        }, {
                            icon: 'icon-jilu1',
                            label: '缴费记录'
                        }, {
                            icon: 'icon-shuifei',
                            label: '用水统计'
                        }
                    ]
                },
                table: {
                    date: '',
                    monthNum: 7,
                    month: {
                        volume: 0,
                        price: 0
                    },
                    yearNum: 2018,
                    year: {
                        volumeYear: 0,
                        priceYear: 0
                    }
                }
            }
        },
        methods: {
            click() {
                if (app.config.setting.platform !== 'wechat' && !app.util.sessionStorage('token')) {
                    this.$router.push({path: '/login'});
                    return;
                }
                this.$router.push({
                    name: 'terminalDataEcharts',
                    params: {
                        id: '用量',
                        month: this.table.date
                    }
                })
            },
            loadData() {
                app.ajax.get(app.config.api.statistics.summary, {}, (res) => {
                    this.table = res.data;
                    let date = this.table.date.split('-');
                    this.table.yearNum = Number(date[0]);
                    this.table.monthNum = Number(date[1]);
                })
            }
        },
        mounted() {
            if (app.util.sessionStorage('token')) {
                this.loadData();
            }

        }
    }
</script>
<style>
    .my-water td {
        width: 33%;
    }

    .my-water tr:last-child td {
        border-top: solid 1px gainsboro;
    }

    .my-water table p {
        margin: 5px;
    }

    .my-water table p:first-child {
        font-size: 14px;
    }

    .my-water table p:last-child {
        font-weight: bolder;
        color: dodgerblue;
    }

    .my-water table .icon {
        width: 16px;
        height: 16px;
        color: coral;
    }
</style>
